<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="ht.js"></script>
  <script src="ht-obj.js"></script>
  <script src="ht-form.js"></script>
  <script src="jquery.min.js"></script>
  <script>

    function getQueryStr(sArgName)
    {
      var args = LocString.split("?");
      var retval = "";
      if(args[0] == LocString)
      {
        return retval;
      }
      var str = args[1];
      args = str.split("&");
      for(var i = 0; i < args.length; i ++)
      {
        str = args[i];
        var arg = str.split("=");
        if(arg.length <= 1) continue;
        if(arg[0] == sArgName) retval = arg[1];
      }
      return retval;
    }

    var dm = new ht.DataModel(),
      objInfos = {
        h: {
          s3: [],
          shape3d: 'objH',
          ready: false
        },
        v: {
          s3: [],
          shape3d: 'objV',
          ready: false
        },
        zoom: 0.1,
        baseSize: 1024,
        vDistance: 2048
      };

    var init = function() {
      var g3d = new ht.graph3d.Graph3dView(dm);
      g3d.addToDOM();

      // 横杠
      ht.Default.loadObj('objs/3.obj', 'objs/3.mtl', {
        shape3d: objInfos.h.shape3d,
        center: true,
        cube: true,
        finishFunc: function(modelMap, array, rawS3) {
          var s3 = objInfos.h.s3;
          rawS3.forEach(function(v) {
            s3.push(v * objInfos.zoom);
          });
          objInfos.h.ready = true;
        }
      });

      // 竖杠
      ht.Default.loadObj('objs/2.obj', 'objs/2.mtl', {
        shape3d: objInfos.v.shape3d,
        center: true,
        cube: true,
        finishFunc: function(modelMap, array, rawS3) {
          var s3 = objInfos.v.s3;
          rawS3.forEach(function(v) {
            s3.push(v * objInfos.zoom);
          });
          objInfos.v.ready = true;
        }
      });

      // 初始化控制面板
      //initForm();

      // 更新架子
      //update(5, 5);


      var view = document.getElementsByClassName('grid')[0];
      view.style.position = 'absolute';
      document.body.removeChild(view);
      document.body.appendChild(view);

    };

    // 更新架子
    var time = null;
    var update = function(w, h) {
      if (!objInfos.h.ready || !objInfos.v.ready) {
        if (time) clearTimeout(time);
        time = setTimeout(function() {
          update(w, h);
          time = null;
        }, 70);
        return;
      }

      dm.clear();

      var baseSize = objInfos.baseSize * objInfos.zoom,
        totalW = baseSize * w,
        totalH = baseSize * h;

      // ---- begin 创建横杠 ----
      var hS3 = objInfos.h.s3.slice(0),
        hShape3d = objInfos.h.shape3d,
        vDis = objInfos.vDistance * objInfos.zoom,
        hBegin = -totalH * 0.5;
      hS3[0] = totalW;

      var pY = hBegin, h;
      while(pY < -hBegin) {
        h = createNode();
        h.s3(hS3.slice(0));
        h.s('shape3d', hShape3d);
        h.p3(0, pY, 0);
        dm.add(h);

        pY += vDis;
      }

      // 创建顶
      var top = createNode();
      top.s3(hS3.slice(0));
      top.s('shape3d', hShape3d);
      top.p3(0, -hBegin, 0);
      dm.add(top);
      // ---- end 创建横杠 ----

      // ---- begin 创建竖杠 ----
      var vS3 = objInfos.v.s3.slice(0),
        vShape3d = objInfos.v.shape3d,
        // 因为横杠和竖杠宽度不一样，所以定义了一个偏移值
        vZOffset = 10,
        vBegin = -totalW * 0.5;
      vS3[1] = totalH;

      var v;
      for (var i = 0; i <= w; i++) {
        v = createNode();
        v.s3(vS3.slice(0));
        v.s('shape3d', vShape3d);
        v.p3(vBegin + i * baseSize, 0, vZOffset);
        dm.add(v);
      }
      // ---- end 创建竖杠 ----
    };

    var createNode = function() {
      var node = new ht.Node();
      node.s({
        '3d.movable': false,
        '3d.selectable': false
      });
      return node;
    };

    // 初始化控制面板
    var initForm = function() {
      var form = new ht.widget.FormPane();
      form.setWidth(140);
      form.setHeight(140);

      form.addRow(['width', {
        id: 'width',
        textField: {}
      }], [40, 0.1]);
      form.addRow(['height', {
        id: 'height',
        textField: {}
      }], [40, 0.1]);
      form.addRow([null, {
        button: {
          label: 'Commit',
          onClicked: function() {
            if (!objInfos.h.ready || !objInfos.v.ready)
              return;

            var w = this.v('width'),
              h = this.v('height');
            update(parseInt(w), parseInt(h));
          }.bind(form)
        }
      }], [0.1, 65]);

      var view = form.getView();
      document.body.appendChild(view);

      var style = view.style;
      style.top = '10px';
      style.right = '10px';
      style.position = 'absolute';
      style.background = 'rgba(224, 224, 224, 0.5)';
    };


    function GetQueryString(name) {
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
    }

    var hw = GetQueryString("width");
    var hh = GetQueryString("height");

    if(hw!=null && hh!=null){
      update(hw, hh);
      $('#width').val(hw);
      $('#height').val(hh);
    }else{
      update(10, 5);
      $('#width').val(10);
      $('#height').val(5);
    }

   /* function searchFun() {
      var w = getQueryStr("width");
      var h = getQueryStr("height");
      console.log(w + ":" + h);
      if(w!='' && h!=''){
        window.location.href='http://sdt14096.digital.com:8080/baiyi/index/web/3d?width='+w+'&height='+h;
      }
    }*/

  </script>
</head>
<body onload="init();">
<table class="grid">
  <!--<tr>
    <td align="center">
      <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">提交</a>
    </td>
  </tr>-->
</table>
</body>
<script src="../js/html2canvas.js"></script>
<script>

  $(function () {
          setTimeout(function () {
              html2canvas($("body"), {
                  onrendered: function (canvas) {
                      var url = canvas.toDataURL(); //base64数据
                      var image = new Image();
                      image.src = url;
                      console.log(url)
                  }
              });
          },6000)

  })
</script>
</html>
